<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./icomoon/style.css">
    <script src="./lib/flexible.js"></script>
    <script src="./lib/echarts.min.js"></script>
    <script src="./js/jquery.min.js"></script>

    <style>
        /* 媒体查询，当浏览器宽度小于1024或者大于1920时不在进行适配 */

        @media screen and (max-width:1024px) {
            html {
                font-size: 42.66px !important;
            }
        }

        @media screen and (min-width:1920px) {
            html {
                font-size: 80px !important;
            }
        }
    </style>
</head>

<body>
    <!-- 设置一个父容器，居中对齐， -->
    <div class="viewport">

        <!-- 左边部分 -->
        <div class="left">
            <!-- panel面板实现边框图片，inner盒子拉伸到panel面板的大小 -->
            <!-- 左上角概览部分 -->
            <div class="overview panel">
                <!-- 主体内容区 -->
                <div class="inner">
                    <ul>
                        <li>
                            <h4>2190</h4>
                            <span class="square"></span>
                            <span>设备总数</span>
                        </li>
                        <li>
                            <h4>2190</h4>
                            <span class="square"></span>
                            <span>设备总数</span>
                        </li>
                        <li>
                            <h4>2190</h4>
                            <span class="square"></span>
                            <span>设备总数</span>
                        </li>
                        <li>
                            <h4>2190</h4>
                            <span class="square"></span>
                            <span>设备总数</span>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 监控区域 -->
            <div class="monitor panel">
                <div class="inner">
                    <!-- 实现tab栏切换 -->
                    <div class="tab">
                        <span class="active">故障设备监控&nbsp;</span> |
                        <span>&nbsp;异常设备监控</span>
                    </div>

                    <!-- 故障代码 -->
                    <div class="head1">

                        <div class="title">
                            <span>故障时间</span>
                            <span>设备地址</span>
                            <span>故障代码</span>
                        </div>


                        <div class="mask"></div>

                        <div class="content">
                            <ul>
                                <li>
                                    <span class="code">100000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>
                                <li>
                                    <span class="code">100000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>
                                <li>
                                    <span class="code">100000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>
                                <li>
                                    <span class="code">100000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>
                                <li>
                                    <span class="code">100000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>
                                <li>
                                    <span class="code">100000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>
                                <li>
                                    <span class="code">100000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>
                                <li>
                                    <span class="code">100000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>
                                <li>
                                    <span class="code">100000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>
                                <li>
                                    <span class="code">100000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>


                            </ul>
                        </div>


                    </div>

                    <!-- 异常代码 -->
                    <div class="head2">

                        <div class="title">
                            <span>异常时间</span>
                            <span>设备地址</span>
                            <span>异常代码</span>
                        </div>


                        <div class="mask"></div>

                        <div class="content">
                            <ul>
                                <li>
                                    <span class="code">110000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>
                                <li>
                                    <span class="code">110000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>
                                <li>
                                    <span class="code">110000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>
                                <li>
                                    <span class="code">110000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>
                                <li>
                                    <span class="code">110000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>
                                <li>
                                    <span class="code">110000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>
                                <li>
                                    <span class="code">110000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>
                                <li>
                                    <span class="code">110000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>
                                <li>
                                    <span class="code">110000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>
                                <li>
                                    <span class="code">110000</span>
                                    <span class="address">北京市昌平区建材城西路金燕龙写字楼</span>
                                    <span class="code2">3000000</span>
                                </li>


                            </ul>
                        </div>


                    </div>


                </div>
            </div>
            <!-- 点位分布区域 -->
            <div class="points panel">
                <!-- 主体内容区域 -->
                <div class="inner">
                    <h3>全国点位分布</h3>

                    <div class="pic">
                        <!-- 饼状图 -->
                        <div class="acharts">

                        </div>
                        <div class="info">
                            <div class="cnt">
                                <h3>320,11</h3>
                                <span>点位总数</span>
                            </div>

                            <div class="incre">
                                <h3>418</h3>
                                <span>今日新增</span>
                            </div>
                        </div>


                    </div>
                </div>

            </div>
        </div>
        <!-- 中间部分 -->
        <div class="main">
            <!-- 上方地图区域 -->
            <div class="location">

                <h3><span class="icon-codepen"></span> 设备数据统计</h3>
                <!-- 地图 -->
                <div class="geo">

                </div>
            </div>
            <!-- 统计用户总数的区域 -->

            <div class="user panel">
                <div class="inner">
                    <h3>全国用户总量统计</h3>
                    <div class="pic">
                        <!-- 柱形图 -->
                        <div class="chart">

                        </div>

                        <div class="info">
                            <div class="usercnt">
                                <h3>120,889</h3>
                                <span><i class="square"></i> 用户总量</span>
                            </div>
                            <div class="incre">
                                <h3>248</h3>
                                <span><i class="square"></i> 今日新增</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- 右边部分 -->
        <div class="right">
            <!-- 订单部分 -->
            <div class="order panel">
                <div class="inner">
                    <!-- 实现tab栏切换 -->
                    <div class="tab-time">
                        <ul class="time">
                            <li class="active">365天&nbsp;</li>|
                            <li>&nbsp;90天&nbsp;</li>|
                            <li>&nbsp;30天&nbsp;</li>|
                            <li>&nbsp;24小时</li>
                        </ul>

                        <div class="content current">
                            <div class="ordercnt">
                                <h3>1987</h3>
                                <span><span class="square"></span> 订单量</span>
                            </div>
                            <div class="salecnt">
                                <h3>1987</h3>
                                <span><span class="square"></span> 销售额(万元)</span>
                            </div>
                        </div>
                        <div class="content">
                            <div class="ordercnt">
                                <h3>1987,00</h3>
                                <span><span class="square"></span> 订单量</span>
                            </div>
                            <div class="salecnt">
                                <h3>1987</h3>
                                <span><span class="square"></span> 销售额(万元)</span>
                            </div>
                        </div>
                        <div class="content">
                            <div class="ordercnt">
                                <h3>12000</h3>
                                <span><span class="square"></span> 订单量</span>
                            </div>
                            <div class="salecnt">
                                <h3>1987</h3>
                                <span><span class="square"></span> 销售额(万元)</span>
                            </div>
                        </div>
                        <div class="content">
                            <div class="ordercnt">
                                <h3>28899</h3>
                                <span><span class="square"></span> 订单量</span>
                            </div>
                            <div class="salecnt">
                                <h3>1987</h3>
                                <span><span class="square"></span> 销售额(万元)</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 销售情况+折线图 -->
            <div class="sale panel">
                <div class="inner">
                    <div class="header">
                        <h3>销售额统计</h3>&nbsp;&nbsp;|&nbsp;&nbsp;
                        <ul class="h-season">
                            <li class="active">年</li>
                            <li>季</li>
                            <li>月</li>
                            <li>周</li>
                        </ul>
                    </div>

                    <!-- 折线图 -->
                    <div class="chart">

                    </div>
                </div>
            </div>
            <!-- 销售区域雷达图 -->
            <div class="saleroad">
                <div class="road panel">
                    <div class="inner">
                        <h3>渠道分布</h3>
                        <!-- 雷达图 -->
                        <div class="chart">

                        </div>
                    </div>
                </div>
                <!-- 饼图的特殊应用：半圆形 -->
                <div class="season panel">
                    <div class="inner">
                        <h3>一季度销售进度</h3>
                        <div class="chart">

                        </div>
                        <h2>75%</h2>
                        <div class="info">
                            <div class="saletotal">
                                <h3>1,321</h3>
                                <span><span class="square"> </span>销售额(万元)</span>
                            </div>
                            <div class="incre">
                                <h3>150%</h3>
                                <span><span class="square"> </span>同比增长</span>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
            <!-- 排行榜 -->
            <div class="rank panel">
                <div class="inner">
                    <div class="r-header">
                        <h3>全国热榜</h3>
                        <h3>各省热销</h3>
                        <p>// 近30日 //</p>
                    </div>

                    <div class="infos">
                        <div class="all">
                            <ul>
                                <li>
                                    <span>🏆</span> 可爱多
                                </li>
                                <li>
                                    <span>🏆</span> 哇哈哈
                                </li>
                                <li>
                                    <span>🏆</span> 喜之郎
                                </li>

                            </ul>
                        </div>
                        <div class="province">
                            <ul>

                            </ul>
                        </div>
                        <div class="province2">

                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <script src="./js/index.js"></script>
    <script src="./js/china.js"></script>
    <script src="./js/myMap.js"></script>
</body>

</html>